<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			//跳转到聊天页面
			mui.plusReady(function () {
				var arrays = ["花落忆流年","梧桐听雨夜","细雨挽轻裳"];
			   mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
			   	  //获取id
			   	 var id = this.getAttribute("id");
			   	 //通过id查询数组上的元素
			   	 var nickname = arrays[id];
			   	 //跳转到聊天页面
				 mui.openWindow({
				     url:'chatQun.html',
				     id:'chatQun.html' + id,
				     extras:{
				       nickname : nickname  //自定义扩展参数，可以用来处理页面间传值
				     }
				 });
			   })  
			});
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">群聊列表</h1>
		</header>
		
		<div style="margin-top: 50px;">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" id="0">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/one3.jpg">
						<div class="mui-media-body">
							花落忆流年
							<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" id="1">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/one1.jpg">
						<div class="mui-media-body">
						    梧桐听雨夜
							<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" id="2">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/one4.jpg">
						<div class="mui-media-body">
						    细雨挽轻裳
							<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</body>

	
</html>
